<script setup>
import{ref} from"vue"
let ac=ref(true)
</script>
<template>
   <div class="gg">
    <ul>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
    </ul>
         <div class="top" v-show="ac">
              <div class="aa">
                <span>消息</span>
                <span >x</span>
              </div>
              <div class="wenzi">
              <slot>错误信息</slot>
            </div>
              <div class="button">
                <button @click="ac=!ac">取消</button>
                <button @click="ac=!ac">确认</button>
              </div>
         </div>
   </div>
</template>
<style scoped>
.gg{
    width: 100vw;
    height: 100vh; 
    background-color: rgba(0, 0, 0, 0.6);
    position: absolute;
    margin: 0;
    padding: 0;
}
.top{
    background-color: white;
    position: relative;
    border-radius: 10px;
    width: 300px;
    height: 250px;
    margin: 0 auto;
}
.aa{
    display: flex;
    justify-content: space-around;
}
.wenzi{
    padding-top: 8%;
}
.button{
    padding-left: 50%;
    padding-top: 50% ;
}
</style>